import 'dart:async';

import 'package:flukit/flukit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/2_advance/login/login_page.dart';
import 'package:flutter_app/generated/assets.dart';

/// 闪屏页
///
/// 有两种：
/// 1. 一张图，图可能是广告，也可以是固定的，右上角显示倒计时，到了之后跳转，
/// 2. 多张滑动图，主要是首次安装进入的时候，展示更新内容
///
/// 可以在这里面做一些网络初始化工作，比如是否登录（很多应用不一定非要登录）
/// 有的app也没有闪屏页，启动后直接进入首页
///
/// 要求：
/// 1. 全屏、不显示状态栏
/// 2. 如果没有网络直接进入主界面(可选)
class RywSlashPage extends StatefulWidget {
  const RywSlashPage({Key? key}) : super(key: key);

  @override
  State<RywSlashPage> createState() => _RywSlashPageState();
}

class _RywSlashPageState extends State<RywSlashPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: AdsView(onNavigate: _onNavigate, seconds: 3),
      ),
    );
  }

  _onNavigate() {
    Navigator.pushReplacement(context, MaterialPageRoute(builder: (ctx) => RywLoginPage()));
  }
}

/// 广告页，倒计时跳转
/// 推荐用 Timer.periodic
/// StreamBuilder 稍微麻烦一点
class AdsView extends StatefulWidget {
  const AdsView({Key? key, this.onNavigate, required this.seconds}) : super(key: key);
  final VoidCallback? onNavigate;
  final int seconds;

  @override
  State<AdsView> createState() => _AdsViewState();
}

class _AdsViewState extends State<AdsView> {
  int _countDownSeconds = 3;

  late Timer _timer;

  @override
  void initState() {
    _countDownSeconds = widget.seconds;
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        _countDownSeconds--;
      });
      if (_countDownSeconds == 0) {
        timer.cancel();
        if (widget.onNavigate != null) {
          widget.onNavigate!();
        }
      }
    });
    super.initState();
  }

  @override
  void dispose() {
    _timerCancel();
    super.dispose();
  }

  _timerCancel() {
    if (_timer.isActive) {
      _timer.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Center(
          child: Image.asset(Assets.imageSplash, fit: BoxFit.fill),
        ),
        Positioned(
          right: 16,
          top: 16,
          child: CountDownView(seconds: _countDownSeconds, onTap: _onTap),
        )
      ],
    );
  }

  _onTap() {
    _timerCancel();
    if (widget.onNavigate != null) {
      widget.onNavigate!();
    }
  }
}

class CountDownView extends StatelessWidget {
  const CountDownView({Key? key, required this.seconds, this.onTap}) : super(key: key);

  final int seconds;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
        decoration: BoxDecoration(
          color: Colors.black38,
          borderRadius: BorderRadius.circular(50),
        ),
        child: DefaultTextStyle(
          style: TextStyle(
            color: Colors.white,
            fontSize: 14,
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(seconds.toString()),
              Text(' | '),
              Text('跳过'),
            ],
          ),
        ),
      ),
    );
  }
}

/// 引导页
/// 可根据实际情况使用 PageView 或者第三方 SwiperView
class SwiperView extends StatelessWidget {
  const SwiperView({Key? key, required this.onNavigation}) : super(key: key);
  final VoidCallback onNavigation;

  @override
  Widget build(BuildContext context) {
    return Swiper(
      circular: false,
      //reverse: true, //反向
      // indicator: CircleSwiperIndicator(
      //   radius: 6,
      // ),
      autoStart: false,
      children: [
        Center(child: Text('引导页1')),
        Center(child: Text('引导页2')),
        Stack(
          children: [
            Center(child: Text('引导页3')),
            Positioned(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(child: Text('进入首页'), onPressed: onNavigation),
                ],
              ),
              bottom: 32,
              left: 0,
              right: 0,
            ),
          ],
        ),
      ],
    );
  }
}
